<template>
  <div>
    <canvas id="expcontainer" width="345" height="190"></canvas>
  </div>
</template>

<script>
import F2 from '@antv/f2'
export default {
  data () {
    return {
      minData: 2000
    }
  },
  props: ['experienceList'],
  methods: {
    renders () {
      const data = this.experienceList
      const chart = new F2.Chart({
        id: 'expcontainer',
        pixelRatio: window.devicePixelRatio
      })

      chart.source(data)
      chart.tooltip({
        showCrosshairs: true
      })
      chart.scale({
        info: {
          range: [0, 1]
        },
        value: {
          tickCount: 6,
          min: 0
        }
      })
      chart.axis('info', {
        label: function label (text, index, total) {
          const textCfg = {}
          if (index === 0) {
            textCfg.textAlign = 'left'
          } else if (index === total - 1) {
            textCfg.textAlign = 'right'
          }
          return textCfg
        }
      })
      chart
        .area()
        .position('info*value')
        .color('l(90) 0:#1890FF 1:#f7f7f7')
      chart
        .line()
        .position('info*value')
        .color('pink')
      chart.render()
    }
  },
  watch: {
    experienceList (val) {
      const arr = []
      val.map(item => {
        arr.push(item.num)
      })
      console.log(val)
      // console.log(arr)
      this.minData = Math.min.apply(null, arr)
      console.log(this.minData)
      this.renders()
    }
  },
  mounted () {
    // this.renders()
  }
}
</script>

<style></style>
